<template>
    <!-- 会有一个默认的宽度 270px，但是如果用户传递的宽度，那么就使用用户传递的 -->
    <div class="xiaoquan-card" :style="width && { width: `${width}px`}">
        <!--卡片图片-->
        <div class="xiaoquan-card-img" :style="imgHeight ? { height: imgHeight + 'px'} : {}">
            <img :src="imgSrc">
        </div>
        <!--卡片描述-->
        <div v-if="summary" class="xiaoquan-card-summary">{{ summary }}</div>
        <div v-else class="xiaoquan-card-summary"><slot/></div>
        <!--卡片footer-->
        <div class="xiaoquan-card-footer" v-if="$slots.footer"><slot name="footer"></slot></div>
    </div>

</template>

<script setup>
    import propsObj from "@/components/Card/props"
    defineOptions({
        name: "XiaoQuan-Card"
    })
    defineProps(propsObj);
</script>

<style scoped lang="scss">

</style>